


<!DOCTYPE html>
<html lang="en">
<head><script src="//archive.org/includes/analytics.js?v=cf34f82" type="text/javascript"></script>
<script type="text/javascript">window.addEventListener('DOMContentLoaded',function(){var v=archive_analytics.values;v.service='wb';v.server_name='wwwb-app209.us.archive.org';v.server_ms=259;archive_analytics.send_pageview({});});</script>
<script type="text/javascript" src="/_static/js/bundle-playback.js?v=U25-Dms9" charset="utf-8"></script>
<script type="text/javascript" src="/_static/js/wombat.js?v=UHAOicsW" charset="utf-8"></script>
<script type="text/javascript">
  __wm.init("https://web.archive.org/web");
  __wm.wombat("https://melonjs.org/en","20201205075004","https://web.archive.org/","web","/_static/",
	      "1607154604");
</script>
<link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=fantwOh2" />
<link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=qtvMKcIJ" />
<!-- End Wayback Rewrite JS Include -->

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://web.archive.org/web/20201205075004cs_/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- Custom styles -->
    <link rel="icon" href="/web/20201205075004im_/https://melonjs.org/style/favicon.png">
    <link href="/web/20201205075004cs_/https://melonjs.org/Content/css?v=4bbSif0bpnedvzZtcwc9dvw6z1ERckLIszXCeLuvgC81" rel="stylesheet"/>

    <script src="/web/20201205075004js_/https://melonjs.org/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>

    <title>melonJS</title>
</head>
<body><!-- BEGIN WAYBACK TOOLBAR INSERT -->
<style type="text/css">
body {
  margin-top:0 !important;
  padding-top:0 !important;
  /*min-width:800px !important;*/
}
</style>
<script>__wm.rw(0);</script>
<div id="wm-ipp-base" lang="en" style="display:none;direction:ltr;">
<div id="wm-ipp" style="position:fixed;left:0;top:0;right:0;">
<div id="donato" style="position:relative;width:100%;">
  <div id="donato-base">
    <iframe id="donato-if" src="https://archive.org/includes/donate.php?as_page=1&amp;platform=wb&amp;referer=https%3A//web.archive.org/web/20201205075004/https%3A//melonjs.org/en"
	    scrolling="no" frameborder="0" style="width:100%; height:100%">
    </iframe>
  </div>
</div><div id="wm-ipp-inside">
  <div id="wm-toolbar" style="position:relative;display:flex;flex-flow:row nowrap;justify-content:space-between;">
    <div id="wm-logo" style="/*width:110px;*/padding-top:12px;">
      <a href="/web/" title="Wayback Machine home page"><img src="/_static/images/toolbar/wayback-toolbar-logo-200.png" srcset="/_static/images/toolbar/wayback-toolbar-logo-100.png, /_static/images/toolbar/wayback-toolbar-logo-150.png 1.5x, /_static/images/toolbar/wayback-toolbar-logo-200.png 2x" alt="Wayback Machine" style="width:100px" border="0" /></a>
    </div>
    <div class="c" style="display:flex;flex-flow:column nowrap;justify-content:space-between;flex:1;">
      <form class="u" style="display:flex;flex-direction:row;flex-wrap:nowrap;" target="_top" method="get" action="/web/submit" name="wmtb" id="wmtb"><input type="text" name="url" id="wmtbURL" value="https://melonjs.org/en" onfocus="this.focus();this.select();" style="flex:1;"/><input type="hidden" name="type" value="replay" /><input type="hidden" name="date" value="20201205075004" /><input type="submit" value="Go" />
      </form>
      <div style="display:flex;flex-flow:row nowrap;align-items:flex-end;">
		<div class="s" id="wm-nav-captures" style="flex:1;">
	  	  <a class="t" href="/web/20201205075004*/https://melonjs.org/en" title="See a list of every capture for this URL">24 captures</a>
	  <div class="r" title="Timespan for captures of this URL">29 Mar 2018 - 22 Jun 2022</div>
	  </div>
	<div class="k">
	  <a href="" id="wm-graph-anchor">
	    <div id="wm-ipp-sparkline" title="Explore captures for this URL" style="position: relative">
	      <canvas id="wm-sparkline-canvas" width="675" height="27" border="0"></canvas>
	    </div>
	  </a>
	</div>
      </div>
    </div>
    <div class="n">
      <table>
	<tbody>
	  <!-- NEXT/PREV MONTH NAV AND MONTH INDICATOR -->
	  <tr class="m">
	    <td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20200703051322/http://www.melonjs.org:80/en" title="03 Jul 2020"><strong>Jul</strong></a></td>
	    <td class="c" id="displayMonthEl" title="You are here: 07:50:04 Dec 05, 2020">DEC</td>
	    <td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20220418223903/https://www.melonjs.org/en" title="18 Apr 2022"><strong>Apr</strong></a></td>
	  </tr>
	  <!-- NEXT/PREV CAPTURE NAV AND DAY OF MONTH INDICATOR -->
	  <tr class="d">
	    <td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20201201092204/https://www.melonjs.org/en" title="09:22:04 Dec 01, 2020"><img src="/_static/images/toolbar/wm_tb_prv_on.png" alt="Previous capture" width="14" height="16" border="0" /></a></td>
	    <td class="c" id="displayDayEl" style="width:34px;font-size:22px;white-space:nowrap;" title="You are here: 07:50:04 Dec 05, 2020">05</td>
	    <td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20220418223903/https://www.melonjs.org/en" title="22:39:03 Apr 18, 2022"><img src="/_static/images/toolbar/wm_tb_nxt_on.png" alt="Next capture" width="14" height="16" border="0" /></a></td>
	  </tr>
	  <!-- NEXT/PREV YEAR NAV AND YEAR INDICATOR -->
	  <tr class="y">
	    <td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20191204083204/http://www.melonjs.org:80/en" title="04 Dec 2019"><strong>2019</strong></a></td>
	    <td class="c" id="displayYearEl" title="You are here: 07:50:04 Dec 05, 2020">2020</td>
	    <td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20220418223903/https://www.melonjs.org/en" title="18 Apr 2022"><strong>2022</strong></a></td>
	  </tr>
	</tbody>
      </table>
    </div>
    <div class="r" style="display:flex;flex-flow:column nowrap;align-items:flex-end;justify-content:space-between;">
      <div id="wm-btns" style="text-align:right;height:23px;">
        	<span class="xxs">
          <div id="wm-save-snapshot-success">success</div>
          <div id="wm-save-snapshot-fail">fail</div>
          <a id="wm-save-snapshot-open" href="#"
	     title="Share via My Web Archive" >
            <span class="iconochive-web"></span>
          </a>
          <a href="https://archive.org/account/login.php" title="Sign In" id="wm-sign-in">
            <span class="iconochive-person"></span>
          </a>
          <span id="wm-save-snapshot-in-progress" class="iconochive-web"></span>
	</span>
        	<a class="xxs" href="http://faq.web.archive.org/" title="Get some help using the Wayback Machine" style="top:-6px;"><span class="iconochive-question" style="color:rgb(87,186,244);font-size:160%;"></span></a>
	<a id="wm-tb-close" href="#close" style="top:-2px;" title="Close the toolbar"><span class="iconochive-remove-circle" style="color:#888888;font-size:240%;"></span></a>
      </div>
      <div id="wm-share" class="xxs">
        <a href="/web/20201205075004/http://web.archive.org/screenshot/https://melonjs.org/en"
           id="wm-screenshot"
           title="screenshot">
          <span class="wm-icon-screen-shot"></span>
        </a>
        <a href="#" id="wm-video" title="video">
          <span class="iconochive-movies"></span>
        </a>
	<a id="wm-share-facebook" href="#" data-url="https://web.archive.org/web/20201205075004/https://melonjs.org/en" title="Share on Facebook" style="margin-right:5px;" target="_blank"><span class="iconochive-facebook" style="color:#3b5998;font-size:160%;"></span></a>
	<a id="wm-share-twitter" href="#" data-url="https://web.archive.org/web/20201205075004/https://melonjs.org/en" title="Share on Twitter" style="margin-right:5px;" target="_blank"><span class="iconochive-twitter" style="color:#1dcaff;font-size:160%;"></span></a>
      </div>
      <div style="padding-right:2px;text-align:right;white-space:nowrap;">
	<a id="wm-expand" class="wm-btn wm-closed" href="#expand" onclick="__wm.ex(event);return false;"><span id="wm-expand-icon" class="iconochive-down-solid"></span> <span class="xxs" style="font-size:80%;">About this capture</span></a>
      </div>
    </div>
  </div>
    <div id="wm-capinfo" style="border-top:1px solid #777;display:none; overflow: hidden">
                    <div id="wm-capinfo-collected-by">
    <div style="background-color:#666;color:#fff;font-weight:bold;text-align:center">COLLECTED BY</div>
    <div style="padding:3px;position:relative" id="wm-collected-by-content">
      <div style="display:inline-block;vertical-align:top;width:49%;">
			<span class="c-logo" style="background-image:url(https://archive.org/services/img/commoncrawl)"></span>
		<div>Collection: <a style="color:#33f;" href="https://archive.org/details/commoncrawl" target="_new"><span class="wm-title">Common Crawl</span></a></div>
		<div style="max-height:75px;overflow:hidden;position:relative;">
	  <div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
	  Web crawl data from Common Crawl.
	</div>
	      </div>
    </div>
    </div>
    <div id="wm-capinfo-timestamps">
    <div style="background-color:#666;color:#fff;font-weight:bold;text-align:center" title="Timestamps for the elements of this page">TIMESTAMPS</div>
    <div>
      <div id="wm-capresources" style="margin:0 5px 5px 5px;max-height:250px;overflow-y:scroll !important"></div>
      <div id="wm-capresources-loading" style="text-align:left;margin:0 20px 5px 5px;display:none"><img src="/_static/images/loading.gif" alt="loading" /></div>
    </div>
    </div>
  </div></div></div></div><div id="wm-ipp-print">The Wayback Machine - https://web.archive.org/web/20201205075004/https://melonjs.org/en</div>
<script type="text/javascript">//<![CDATA[
__wm.bt(675,27,25,2,"web","https://melonjs.org/en","20201205075004",1996,"/_static/",["/_static/css/banner-styles.css?v=fantwOh2","/_static/css/iconochive.css?v=qtvMKcIJ"], false);
  __wm.rw(1);
//]]></script>
<!-- END WAYBACK TOOLBAR INSERT -->

    <a id="top"></a>

    <a class="fade-slow forkme collapse" href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonjs">
        <img src="https://web.archive.org/web/20201205075004im_/https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://web.archive.org/web/20201205075004/https://s3.amazonaws.com/github/ribbons/forkme_right_green_ffffff.png">
    </a>

    <nav class="fade-slow navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">melon<span class="logo">JS</a></a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#top">Home</a></li>
                    <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/releases">Download</a></li>
                    <li><a href="https://web.archive.org/web/20201205075004/http://melonjs.github.io/docs/">API</a></li>
                    <li><a href="#getting-started">Getting Started</a></li>
                    <li><a href="https://web.archive.org/web/20201205075004/http://blog.melonjs.org/">Blog</a></li>
                    <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/made-with-melonJS">Gallery</a></li>
                    <li><a href="https://web.archive.org/web/20201205075004/http://forum.melongaming.com/">Forum</a></li>
                    <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS#questions-need-help-">Contact Us</a></li>
                    <li><a href="https://web.archive.org/web/20201205075004/http://www.melongaming.com/">Melon Gaming</a></li>
                    <li class="mobile-forkme"><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonjs">Github</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Language</a></li>
                    <li>
                        <div class="dropdown" style="padding-top: 7px; padding-left: 15px; margin-right: 100px;">
                            <button id="btnLanguage" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li class="active"><a href="/web/20201205075004/https://melonjs.org/en">English</a></li>
                                <li><a href="/web/20201205075004/https://melonjs.org/zh">Chinese</a></li>
                                <li><a href="/web/20201205075004/https://melonjs.org/ja">Japanese</a></li>
                                <li><a href="/web/20201205075004/https://melonjs.org/kr">Korea</a></li>
                                <li><a href="/web/20201205075004/https://melonjs.org/vi">Vietnam</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="fade-slow jumbotron">
        <div class="container">
            <h1>Fresh &amp; Lightweight</h1>
            <p>melonJS is an open source HTML5 game engine that empowers developers and designers to focus on content.</p>
            <p>
                The framework provides a collection of composable entities and support for a number of third-party tools. Giving you a powerful combination that can be used wholesale or piecemeal.
        </p>
        <p>
            <a class="btn btn-primary btn-lg" href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/releases" role="button"><span class="glyphicon glyphicon-save"></span> Download</a>
            <a class="btn btn-default btn-lg" href="https://web.archive.org/web/20201205075004/http://melonjs.github.io/docs/" role="button">Read The Docs &raquo;</a>
        </p>
    </div>
</div>

<div id="attract">
    <div id="screen"></div>
</div>

<div class="fade-slow">
    <div class="band">
        <div class="container">
            <h2>Try Me!</h2>
            <hr>
            <p>Use the following keys to start playing a simple game built with melonJS. Try it with a gamepad!</p>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-5">
                    <table class="table table-condensed">
                        <thead>
                            <tr><th>Key</th><th>Action</th></tr>
                        </thead>
                        <tbody>
                            <tr><th><kbd><span class="glyphicon glyphicon-chevron-up"></span></kbd> <kbd>W</kbd> <kbd>Spacebar</kbd></th><td>Jump</td></tr>
                            <tr><th><kbd><span class="glyphicon glyphicon-chevron-left"></span></kbd> <kbd>A</kbd></th><td>Walk Left</td></tr>
                            <tr><th><kbd><span class="glyphicon glyphicon-chevron-down"></span></kbd> <kbd>S</kbd></th><td>Drop Down</td></tr>
                            <tr><th><kbd><span class="glyphicon glyphicon-chevron-right"></span></kbd> <kbd>D</kbd></th><td>Walk Right</td></tr>
                            <tr><th><kbd>F</kbd></th><td>Full-Screen Mode</td></tr>
                            <tr><th><kbd>Esc</kbd></th><td>Exit Game</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <p>See you in a bit!</p>
        </div>
    </div>

    <div class="band">
        <div class="container">
            <p>melonJS is a lightweight yet powerful HTML5 framework designed from the ground up to provide a true plugin-free &#39;write-once, run-everywhere&#39; gaming platform. melonJS is an open-source project and supported by a community of enthusiasts. See our Gallery for a few examples of games powered by melonJS.</p>
            <h2>Getting Started<a id="getting-started" class="anchor"></a></h2>
            <hr>
            <ul id="getting-started">
                <li><a href="https://web.archive.org/web/20201205075004/http://melonjs.github.io/tutorial-platformer/" target="_blank">Platformer Tutorial</a>
                <li><a href="https://web.archive.org/web/20201205075004/http://melonjs.github.io/tutorial-space-invaders/" target="_blank">Space Invaders Tutorial</a>
                <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/boilerplate">Boilerplate Project</a>
            </ul>
        </div>
    </div>

    <div class="band">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h2>Fast</h2>
                    <img class="right vspacer-20" height="128" align="top" src="/web/20201205075004im_/https://melonjs.org/media/icons/HTML5_Badge.png" alt="HTML5">
                    <blockquote>
                        <p>Built with future technology.</p>

                        <ul>
                            <li>WebGL
                            <li>WebAudio
                            <li>ES6 Collections
                        </ul>
                    </blockquote>
                </div>
                <div class="col-md-4">
                    <h2>Free</h2>
                    <blockquote>
                        <p>Released under the permissive MIT License.</p>
                        <p>No cost.</p>
                        <p>Royalty free.</p>
                        <p>Forever.</p>
                    </blockquote>
                </div>
                <div class="col-md-4">
                    <h2>Elegant</h2>
                    <blockquote>
                        <p>Your scene graph is a hierarchy of containers.</p>
                        <p>Updates and drawing operations are dispatched separately.</p>
                        <p>Draws are opt-in; add compute-only entities for AI, special effects, etc.</p>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>

    <div class="band">
        <div class="container">
            <h2>Powerful Level Design</h2>
            <hr>
            <p>melonJS integrates the popular Tiled map format, allowing designers easily create levels using the Tiled map editor, and to focus on the game features itself.</p>
            <img src="/web/20201205075004im_/https://melonjs.org/media/alex4-github.png" alt="" title="Fast and Powerful level design through Tiled">
        </div>
    </div>

    <div class="band">
        <div class="container">
            <h2>Developer Spotlight</h2>
            <table style="width:100%">
                <tr>
                    <th><a href="https://web.archive.org/web/20201205075004/http://masterspygame.com/">Master Spy</a> by Turbogun</th>
                    <th><a href="https://web.archive.org/web/20201205075004/http://radmars.com/">Radmars Team</a> - Ludum Dare &amp; GameJam</th>
                </tr>
                <tr valign="top">
                    <th><iframe width="500" height="315" src="https://web.archive.org/web/20201205075004if_/https://www.youtube.com/embed/WpNllTmnXFQ" frameborder="0" allowfullscreen></iframe></th>
                    <th><img width="500" height="315" frameborder="0" src="/web/20201205075004im_/https://melonjs.org/media/radmars_intro.gif" alt="radmars intro"></th>
                </tr>
            </table>

        </div>
    </div>

    <div class="band">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>Features<a id="features" class="anchor"></a></h2>
                    <hr>
                    <ul>
                        <li>A fresh and lightweight 2D sprite-based engine
                        <li>Standalone library (no additional dependencies)
                        <li>Fast WebGL renderer for desktop and mobile devices with fallback to Canvas rendering
                        <li>Web Audio support with fallback to Multi-channel HTML5 audio
                        <li>High DPI &amp; auto scaling video modes
                        <li>Tween &amp; Transition effects
                        <li>
                            Lightweight 2D physics implementation to ensure low cpu requirements
                            <ul>
                                <li>Polygon (SAT) based collision algorithm for accurate detection and response
                                <li>Fast broad-phase collision detection using spatial partitioning
                                <li>Advanced math API for Vector and Matrix
                                <li>3rd party tools support for physic body definition (PhysicEditor, Physic Body Editor)
                            </ul>
                        </li>

                        <li>
                            A basic set of extensible Object Entities:
                            <ul>
                                <li>Object Pooling
                                <li>Basic Particle System
                                <li>Basic animation management
                                <li>Standard spritesheet and Packed Textures (Texture Packer) support
                                <li>Some basic GUI elements
                            </ul>
                        </li>

                        <li>
                            Tiled map format integration for easy level design:
                            <ul>
                                <li>Orthogonal, Isometric, Hexagonal, and Perspective tilemap support
                                <li>Multiple layers with parallax scrolling
                                <li>Shape-based collision layers (Rectangle, Ellipse, Polygon, and Polyline)
                                <li>JSON and XML formats
                            </ul>
                        </li>

                        <li>System and Bitmap fonts
                        <li>A state manager and customizable loader
                        <li>Mouse, Touch, Pointer, and Gamepad device support
                        <li>Device motion, orientation, and accelerometer support
                        <li>Built-in support for 3rd party Application Wrappers such as <a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/Making-your-game-into-a-mobile-hybrid-app#cordova">Cordova </a>
                        <li>As light as <a href="https://web.archive.org/web/20201205075004/https://bundlephobia.com/result?p=melonjs@latest">~70kb</a> minified &amp; gzipped
                    </ul>
                </div>

                <div class="col-md-6">
                    <img class="right vspacer-20" width="150" src="/web/20201205075004im_/https://melonjs.org/media/icons/browser_icons.png" alt="browser icons example">
                    <h2>Compatibility<a id="compatibility" class="anchor"></a></h2>
                    <hr>
                    <p>melonJS works with any full ES5 compatible browsers</p>
                    <table class="table">
                        <thead>
                            <tr><th>Browser</th><th>Version</th><th>Status</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>
                                    <a href="https://web.archive.org/web/20201205075004/http://www.google.com/chrome/">Chrome</a>
                                </th>
                                <td>55+</td>
                                <td><span class="glyphicon glyphicon-check text-success"></span></td>
                            </tr>
                            <tr>
                                <th><a href="https://web.archive.org/web/20201205075004/http://www.apple.com/safari/">Safari</a></th>
                                <td>10+</td>
                                <td><span class="glyphicon glyphicon-check text-success"></span></td>
                            </tr>
                            <tr>
                                <th><a href="https://web.archive.org/web/20201205075004/http://www.mozilla.com/">Firefox</a></th>
                                <td>50+</td>
                                <td><span class="glyphicon glyphicon-check text-success"></span></td>
                            </tr>
                            <tr>
                                <th><a href="https://web.archive.org/web/20201205075004/http://www.opera.com/">Opera</a></th>
                                <td>42+</td>
                                <td><span class="glyphicon glyphicon-check text-success"></span></td>
                            </tr>
                            <tr>
                                <th><a href="https://web.archive.org/web/20201205075004/http://windows.microsoft.com/en-US/internet-explorer/downloads/ie">IE</a></th>
                                <td>11+</td>
                                <td><span class="glyphicon glyphicon-check text-success"></span></td>
                            </tr>
                            <tr>
                                <th><a href="https://web.archive.org/web/20201205075004/https://www.google.com/chrome/browser/mobile/">Chrome for Mobile</a></th>
                                <td>55+</td>
                                <td><span class="glyphicon glyphicon-check text-success"></span></td>
                            </tr>
                            <tr>
                                <th><a href="https://web.archive.org/web/20201205075004/http://www.apple.com/safari/">iOS Safari</a></th>
                                <td>9.3+</td>
                                <td><span class="glyphicon glyphicon-check text-success"></span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="band">
        <div class="container">
            <h3>Third Party Tools Integration<a id="third-party" class="anchor"></a></h3>
            <hr>
            melonJS provides native integration and support for the following 3rd party tools :
            <ul>
                <li><a href="https://web.archive.org/web/20201205075004/https://github.com/bjorn/tiled/wiki">Tiled</a>
                <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/How-to-use-Texture-Atlas-with-TexturePacker">TexturePacker</a>
                <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/shoebox">Shoebox</a>
                <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/How-to-load-PhysicEditor-Shapes-into-your-project">PhysicEditor</a>
                <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/How-to-generate-and-use-Bitmap-Font-in-melonJS">BitmapFont Generator</a>
                <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/Making-your-game-into-a-mobile-hybrid-app#cordova">Cordova/PhoneGap</a>
                <li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/How-to-build-your-game-for-tvOS-(or-iOS)-using-Ejecta">Ejecta</a>
            </ul>
        </div>
    </div>

</div>

<div id="attract"></div>

<div id="footer" class="fade-slow">
    <div class="container">
        <footer>
            <p>&#169; melonJS team 2011-2020</p>
        </footer>
    </div>
</div>

<!-- melonJS -->
<script src="https://web.archive.org/web/20201205075004js_/https://cdn.jsdelivr.net/npm/melonjs@latest/dist/melonjs.min.js"></script>
<script src="https://web.archive.org/web/20201205075004js_/https://cdn.jsdelivr.net/npm/melonjs@latest/plugins/debug/debugPanel.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/game.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/resources.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/coin.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/enemies.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/player.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/HUD.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/controls.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/screens/play.js"></script>
<script type="text/javascript">
    me.device.onReady(function onReady() {
        // enable cross-origin image loading
        me.loader.crossOrigin = "anonymous"
        // configure the baseURL for the loader
        me.loader.setBaseURL("*", "https://web.archive.org/web/20201205075004/http://melonjs.github.io/melonJS/examples/platformer/");
        // enable swipe on mobile device
        if (me.device.isMobile) {
            // Prevent the webview from moving on a swipe
            me.device.enableSwipe();
        }

        // game boostrap
        game.onload();

        // mute audio for the website
        me.audio.muteAll();

        /*
         * Some extra magic to toggle the website UI on demand
         */
        function fade_in() {
            var els = document.querySelectorAll(".fade-slow, .fade-fast");
            Array.prototype.slice.call(els).forEach(function (el) {
                if (el.classList.contains("transparent")) {
                    el.classList.add("fade-fast");
                    el.classList.remove("fade-slow");
                    el.classList.remove("transparent");

                    setTimeout(function () {
                        el.classList.add("fade-slow");
                        el.classList.remove("fade-fast");
                    }, 200);
                }
            });

            me.audio.muteAll();

            // Change FPS
            if (me.sys.fps !== 25) {
                me.sys.fps = 25;
                me.game.updateFrameRate();
            }
        }

        function fade_out() {
            var els = document.querySelectorAll(".fade-slow, .fade-fast");
            Array.prototype.slice.call(els).forEach(function (el) {
                el.classList.add("transparent");
            });

            me.audio.unmuteAll();

            // Change FPS
            if (me.sys.fps !== 60) {
                me.sys.fps = 60;
                me.game.updateFrameRate();
            }
        }

        me.event.subscribe(me.event.KEYDOWN, function (action, keycode) {
            switch (keycode) {
                case me.input.KEY.ESC:
                    fade_in();
                    break;

                case me.input.KEY.W:
                case me.input.KEY.A:
                case me.input.KEY.S:
                case me.input.KEY.D:
                case me.input.KEY.F:
                case me.input.KEY.SPACE:
                case me.input.KEY.UP:
                case me.input.KEY.DOWN:
                case me.input.KEY.LEFT:
                case me.input.KEY.RIGHT:
                    fade_out();
                    break;
            }
        });

        setTimeout(function () {
            window.addEventListener("scroll", fade_in);
        }, 100);
    });
</script>
<script>
        document.getElementById("btnLanguage").innerHTML = "en";
</script>
<script src="/web/20201205075004js_/https://melonjs.org/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>

<script src="/web/20201205075004js_/https://melonjs.org/bundles/bootstrap?v=S9-VFjJll7-h6B6vedKZxuNRBdqXLY3XTPKv3OQRv1w1"></script>

</body>
</html>
<!--
     FILE ARCHIVED ON 07:50:04 Dec 05, 2020 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 00:21:19 Oct 09, 2022.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
-->
<!--
playback timings (ms):
  captures_list: 115.446
  exclusion.robots: 0.193
  exclusion.robots.policy: 0.186
  cdx.remote: 0.059
  esindex: 0.009
  LoadShardBlock: 40.684 (3)
  PetaboxLoader3.datanode: 57.357 (4)
  CDXLines.iter: 19.613 (3)
  load_resource: 132.291
  PetaboxLoader3.resolve: 100.852
-->